<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .register-container {
            width: 400px;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }

        .gender-group {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
        }

        .gender-group label {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
        }

        .avatar-selection {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            overflow-x: auto; /* 允许水平滚动 */
            padding-bottom: 10px; /* 为滚动条留出空间 */
        }

        .avatar-item {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
            transition: border-color 0.3s;
            flex-shrink: 0; /* 防止头像被压缩 */
        }

        .avatar-item.selected {
            border-color: #007bff;
        }

        .register-button {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        .register-button:hover {
            background-color: #218838;
        }

        .error-message {
            color: red;
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>

<body>
<div class="register-container">
    <h2>用户注册</h2>
    <form id="registerForm">
        <div class="form-group">
            <label for="appKey">App Key</label>
            <input type="text" id="appKey" name="appKey" placeholder="请输入 App Key" required>
        </div>
        <div class="form-group">
            <label for="mobile">手机号</label>
            <input type="text" id="mobile" name="mobile" placeholder="请输入手机号" required>
        </div>
        <div class="form-group">
            <label for="nickname">昵称</label>
            <input type="text" id="nickname" name="nickname" placeholder="请输入昵称" required>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" placeholder="请输入密码" required>
        </div>
        <div class="form-group">
            <label>性别</label>
            <div class="gender-group">
                <label>
                    <input type="radio" name="gender" value="1" required> 男
                </label>
                <label>
                    <input type="radio" name="gender" value="2" required> 女
                </label>
            </div>
        </div>
        <div class="form-group">
            <label>选择头像</label>
            <div class="avatar-selection" id="avatarSelection">
                <!-- 头像将通过 JavaScript 动态渲染 -->
            </div>
        </div>
        <button type="submit" class="register-button">注册</button>
    </form>
    <p id="errorMessage" class="error-message"></p>
</div>

<script>

    // 配置接口服务前缀（IP 和端口）
    const API_BASE_URL = 'http://127.0.0.1:8080/web';

    // 获取头像列表
    function getAvatars() {
        let avatars = [
            '0d93f139-23f8-4b48-ae3a-a929a0c864c3.png',
            'b7528d61-f7e2-4436-b650-dc4050738997.png',
            '55e321a8-645a-47ae-99ae-284a70086b95.png',
            '1617a7b2-ddc8-4a87-9353-c7a53d84e37e.png',
            '5f541328-3dd3-4f65-be26-c47dfbf0c4cb.png',
            'fdc3281e-68d3-4509-af00-ed34dc1017a2.png',
            'bfa67c9c-a174-43da-89b5-4515c26e7b44.png',
            '60817dca-1775-4bb5-9857-d9c6c6220258.png',
            '52edea67-7c11-4964-8309-c32ad6030592.png',
            'e9b06008-1e41-455a-9b1d-d462704bdc80.png',
            '210f1a21-e389-46e3-a6bd-97fcabf0736b.png',
            '4d4fde6c-a74b-4c65-8cd6-adc9097d53a3.png',
            'd37a53f4-8593-4520-9500-182933644286.png',
            '79e3a26d-bb86-471a-a4b7-4c674fad4d1d.png',
            '2d90da22-d42c-4250-866e-906e223293f3.png',
            '21421268-16bf-448e-9400-49e5f2964ed1.png',
            '6499c545-4ce2-4d6f-bd72-b0e9435c9172.png',
            '0815e98a-184c-4b37-9749-634307f1a6f1.png',
            'c28b3f77-74a2-4dfa-97ad-e3cd6740b7ef.png',
            'a75d8e30-1254-491b-9499-ab00bc51acba.png',
            'c6dfd428-be75-4631-a000-5af0b1a3a1d2.png',
            '63a73984-065d-4fd9-832f-dca93b904f8f.png',
            'a608ee1b-6797-4bc1-9fa4-a648ca460f75.png',
            '9871d8ea-37d9-4a56-b628-c7e6ef875909.png',
            'c960c09b-4662-42b1-b9fe-06b0f377da7f.png',
            'f21c1ede-acf5-4e10-89e6-721be2a650db.png',
            '8689a96d-2034-4d37-87f8-540f3054d70b.png',
            'fcc3af78-f726-4dab-a9c4-783e4a7c9c89.png',
            '6f5adfa2-e9e1-4638-9f11-2ae31a122d63.png',
            '90ba7b04-f069-4a5b-ad04-f80ac5a02f0f.png',
            'a7c14cb5-302c-4a3f-9ce9-a9f8845096b8.png',
            '6c5ed2a1-740d-48a2-b8bd-b0940d2a4745.png',
            '82019942-abec-4a85-b221-d8955dfac2d1.png',
            '8de64b86-2757-41bc-8ef9-eb7d51865e8b.png',
            'eeb2da55-5de4-4783-9889-6679b183ac09.png',
            'a341e011-a542-4500-ae26-8d46be284f00.png',
            '89acab9c-2692-4c22-bab0-a20ec29af9bc.png',
            '0e834e54-d30a-4556-8f45-b2bb46739753.png',
            '17dd1d48-48a5-42b5-91d9-0db238f5924f.png',
            'e476dc01-f9e5-4f7f-928c-5c6d4b466875.png',
            'be965051-9277-4368-827c-57691d3ccd28.png',
            '0605ad1c-fa05-4b78-aabf-4ae179f6e62d.png',
            'e38bb843-8bf8-494e-9165-1d6ba72bd481.png',
            'a0af28af-d6f1-4072-8c9b-16f6115733ac.png',
            '8866bda4-9324-4b94-a539-62ae685ef26c.png',
            '8e38b527-9a94-408a-a58e-4afc7b75e88d.png',
            'ee751e88-c034-4656-ad00-6f13993a31f6.png',
            '16e82d29-bbf0-40e0-89fa-9a55ccf4d02b.png',
            'd17cf14f-4017-4519-869e-baddbd3900e1.png',
            'ca4c1ea3-daf7-435c-b9d5-06f5beba6f5f.png',
            '290c9b39-b193-4056-8cd8-ec33ff7132f2.png',
            '47eef4a1-d2af-48f8-85ac-fb100c715a82.png',
            'bc37a8e8-3f4a-49fd-9c7f-f7e408a7ecb9.png',
            '83e7100d-baf9-4bb9-9db9-4fe4b29b1b7d.png',
            'b856fa71-468e-485d-a77b-592256d08b6a.png',
            '3402da95-84ea-4c38-8d43-42127448f8f2.png',
            '7a0d8ff5-f42f-4263-9880-0888f3683324.png',
            '8d89fea5-4748-4654-96c9-d50589ac190d.png',
            '2fdf40b3-b625-4ede-b898-9ff4da939ce4.png',
            '15293250-c8aa-4627-ac21-2b2db470ab32.png',
            '024fc0bd-433d-4d63-a747-ab4f936a3ff0.png',
            '86e493f5-6777-4ef7-be42-37479151e0cf.png',
            '647a2bd0-3539-4afd-ad87-d96625576d3b.png',
            '8c3a3e5c-ddc0-4205-a843-cf2ce51fa15c.png',
            'c1796da9-72c6-4df7-9718-669af7f31e6b.png',
            'e5daaa82-d364-456b-9351-5303ba2d07ac.png',
            '6ff3cc9c-4466-4610-9666-b39cae20487c.png',
            '2ec45fba-0310-467d-93f3-747d80d8dd05.png',
            '21d377f2-d03c-49c9-9f22-c68de3935e40.png',
            '357f4559-8cb4-4937-bbb7-707d6cc0ccc5.png',
            'a0fd2af9-49cb-436f-b192-356bd7c1f340.png',
            '0ca0c8ec-e108-44ba-bfde-1c6ac60e1d0c.png',
            '25d56494-b5dc-4235-b7ad-53701251aa7d.png',
            '2db4dbe7-66c6-4cb0-b3b5-40560d824c7d.png',
            '2f6c22f5-0043-4377-98f7-043c0b98532e.png',
        ];
        avatars = avatars.map((avatar) => {
            return `https://file.lwoowl.cn/avatar_jgd/${avatar}`;
        });
        return avatars;
    }

    // 渲染头像选择
    function renderAvatars() {
        const avatarSelection = document.getElementById('avatarSelection');
        const avatars = getAvatars();

        avatars.forEach((avatar, index) => {
            const img = document.createElement('img');
            img.src = avatar;
            img.className = 'avatar-item';
            img.addEventListener('click', () => selectAvatar(index));
            avatarSelection.appendChild(img);
        });
    }

    // 选择头像
    let selectedAvatarIndex = null;
    function selectAvatar(index) {
        const avatarItems = document.querySelectorAll('.avatar-item');
        avatarItems.forEach((item, i) => {
            if (i === index) {
                item.classList.add('selected');
                selectedAvatarIndex = index;
            } else {
                item.classList.remove('selected');
            }
        });
    }

    // 注册用户
    async function registerUser(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        const appKey = document.getElementById('appKey').value;
        const mobile = document.getElementById('mobile').value;
        const nickname = document.getElementById('nickname').value;
        const password = document.getElementById('password').value;
        const gender = document.querySelector('input[name="gender"]:checked')?.value;
        const errorMessage = document.getElementById('errorMessage');

        if (!appKey || !mobile || !nickname || !password || !gender || selectedAvatarIndex === null) {
            errorMessage.textContent = '请填写所有字段并选择头像和性别';
            return;
        }

        const avatar = getAvatars()[selectedAvatarIndex];

        try {
            // 拼接完整的接口 URL
            const url = `${API_BASE_URL}/user/register`;
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    appKey,
                    mobile,
                    nickname,
                    password,
                    gender,
                    avatar,
                }),
            });

            const data = await response.json();

            if (data.code === 200) {
                // 注册成功，跳转到登录页
                window.location.href = './login.html';
            } else {
                // 注册失败，显示错误信息
                errorMessage.textContent = data.msg || '注册失败';
            }
        } catch (error) {
            errorMessage.textContent = '网络错误，请稍后重试';
        }
    }

    // 初始化页面
    window.onload = function () {
        renderAvatars(); // 渲染头像选择
        document.getElementById('registerForm').addEventListener('submit', registerUser);
    };
</script>
</body>

</html>
